.<template>
  <div>
    <div class="tip">
      <div class="text">个人中心</div>
      <div class="user">
        <img
          class="photo"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/pssx3i9jwo2h3673t2hasc9lgv9h0wpal550083fb-d3ff-4356-9a2d-09fd19dac018"
          alt=""
        />
        <p class="name">欢迎您，{{name}}</p>
      </div>
    </div>
    <div class="data w100">
      <div class="yi">
        <p>0</p>
        <p>贝壳</p>
      </div>
      <div class="er">
        <p>0</p>
        <p>星值商城</p>
      </div>
    </div>
    <ul class="xinxi">
      <router-link tag="li" to="">
         <img class="li-img" src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/347c23c2524f49da9805c2d7ed24e871_mergeImage.png" alt="">
         <p>我的订单</p>
      </router-link>
      <router-link tag="li" to="">
         <img class="li-img" src="https://lanhu.oss-cn-beijing.aliyuncs.com/pssxxbvd12wsahra21o94045a1yze0fe7454db22a6-9c3b-46e9-9be4-55585a7cb758" alt="">
         <p>我的历史</p>
      </router-link>
      <router-link tag="li" to="">
         <img class="li-img" src="https://lanhu.oss-cn-beijing.aliyuncs.com/psf76ji8zzgqnyjccl50yiv920bm82u4rqea19ad44f-ca4f-49b8-b028-229c7242d43c" alt="">
         <p>我的消息</p>
      </router-link>
      <router-link tag="li" to="">
         <img class="li-img" src="https://lanhu.oss-cn-beijing.aliyuncs.com/psfo6fuyumwb5tzdmxbwm65o44g2j8ds1r2d12ccd2-b80b-4d04-a2fe-3ac44728b4f1" alt="">
         <p>收货地址</p>
      </router-link>
      <router-link tag="li" to="">
         <img class="li-img" src="https://lanhu.oss-cn-beijing.aliyuncs.com/psnbm25qz5ekpj3v6qqqjrqbv9ii65y3lwc6ae5a89-42b3-4b86-8cad-eadaf974efe5" alt="">
         <p>客服</p>
      </router-link>
      <router-link tag="li" to="">
         <img class="li-img" src="https://lanhu.oss-cn-beijing.aliyuncs.com/psbo1svivs3lrtw6gxozfqcx7dd7afhh596137ae01-ddfa-4a18-9acd-1ac193b2107d" alt="">
         <p>投诉建议</p>
      </router-link>
      <router-link tag="li" to="">
         <img class="li-img" src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps71rk9f6z4rdgucaeawb27t5vdfsxydzzu4e8702cf-31c3-40c6-8481-22d9c39c9b83" alt="">
         <p>物流消息</p>
      </router-link>
      <router-link tag="li" to="">
         <img class="li-img" src="https://lanhu.oss-cn-beijing.aliyuncs.com/pstnsxjfe33mkjxweug0n93habidk5ccegcf463547a-c922-48e7-b242-c1c6fa4691f2" alt="">
         <p>赠送记录</p>
      </router-link>
      <router-link tag="li" to="">
         <img class="li-img" src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps2abnkc5e6jkhpsmtx9dx9b0wbz4z9fxhwaef15efc1-322f-421b-999a-e2e0fa852bbd" alt="">
         <p>红包兑换</p>
      </router-link>
      <router-link tag="li" to="">
         <img class="li-img" src="https://lanhu.oss-cn-beijing.aliyuncs.com/psb7u67ulltetqbxgsy2qwbr546404rys6c3d5b5e-233b-46bc-9d07-3ba3974e7177" alt="">
         <p>填写邀请码</p>
      </router-link>
      <router-link tag="li" to="">
         <img class="li-img" src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps2dt8ranug6supa0m4jfmv1zpeo17v67x5016fe1b-803d-4f3d-b614-cea957571301" alt="">
         <p>关于</p>
      </router-link>
    </ul>
    <div class="image">
       <img
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/psym9rdea2y688inz46k7leoy0o1zrzan6mfb1cced8-115e-40dd-adf4-3cc483b3915a"
      />
    </div>
  </div>
</template>

<script>
export default {
   data() {
      return {
         name:localStorage.getItem("shouji")||"游客"
      }
   },

};
</script>

<style scoped>
.tip {
  height: 3.8rem;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/pswo9ck5dr8wqdg79lpb8mib20ea73kwjl5ef26ba5-3831-4c8c-bb6f-157e977b016c)
    no-repeat;
  width: 100%;
  background-size:100% 3.8rem ;
}
.text {
  width: 100%;
  height: 0.9rem;
  color: rgba(68, 67, 67, 1);
  font-size: 0.36rem;
  line-height: 0.9rem;
  text-indent: 0.2rem;
}
.user {
  width: 100%;
  height: 2.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.photo {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: brown;
}
.name {
  height: 0.8rem;
  line-height: 0.8rem;
  text-align: center;
}
.data{
   height: 1.5rem;
   display: flex;
   justify-content: space-around;
}
.yi,.er{
   width: 30%;
   display: flex;
   flex-direction: column;
   justify-content:center;
   align-items: center;
}
.yi p:nth-child(2),.er p:nth-child(2){
   font-size: 0.35rem;
   font-weight: 600;
}
.xinxi{
   width: 95%;
   height: 4rem;
   margin: 0.2rem auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
.xinxi li{
   width: 18%;
   height: 0.88rem;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
   margin-top:0.1rem ;
}
.li-img{
   width:0.5rem ;
   height:0.5rem ;
   border-radius:50%;
}
.xinxi li p{
   font-size: 0.25rem;
}
.image {
  width: 100%;
  height: 2.93rem;
  margin: 0.2rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.image img{
   width: 90%;
   height: 90%;
}
</style>